<template>
  <div class="gm-ss">
    <el-form class="add-list-data" :model="form" ref="form">
      <h3>发布新说说</h3>
      <el-form-item
        class="title"
        prop="label"
        :rules="[{ required: true, message: '标题不能为空' },{ min: 2, max: 24,message: '长度在2到24个字符之间' }]"
      >
        <el-input type="text" v-model="form.label" placeholder="请输入说说标题" />
      </el-form-item>
      <el-form-item
        class="body"
        prop="body"
        :rules="[{ required: true, message: '内容不能为空' },{ min: 2, max: 180,message: '长度在2到180个字符之间' }]"
      >
        <el-input
          type="textarea"
          :autosize="{ minRows: 6}"
          v-model="form.body"
          placeholder="请输入说说内容"
        ></el-input>
      </el-form-item>
      <div class="select">
        <div class="mood">
          <span>心情：</span>
          <el-form-item prop="mood" :rules="[{ min: 0, max: 6,message: '长度在2到6个字符之间' }]">
            <el-input type="text" v-model="form.mood" placeholder="描述心情"></el-input>
          </el-form-item>
        </div>
        <div class="icon">
          <el-select placeholder="请选择心情图标" v-model="form.moodIconNum">
            <el-option v-for="data in moodIcon" :key="data.value" :value="data.text">{{ data.text }}</el-option>
          </el-select>
        </div>
        <div class="hot">
          <el-checkbox-group v-model="form.hot">
            <el-checkbox label="hot" name="hot"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="btn">
          <el-button @click="setMoodData('form')">发布</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { userUrl } from "@/public/uri.js";
import { mapState, mapActions } from "Vuex";
export default {
  name: "gm-ss",
  data() {
    return {
      form: {
        label: "",
        body: "",
        hot: false,
        moodIconNum: "",
        mood: ""
      },
      moodIcon: [
        {
          value: 0,
          text: "笑脸"
        },
        {
          value: 1,
          text: "滑稽"
        },
        {
          value: 2,
          text: "难过"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    setMoodData(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let moodIconNum = "";
          let moodIcon = this.moodIcon;
          for (let i = 0; i < moodIcon.length; i++) {
            if (moodIcon[i].text === this.form.moodIconNum) {
              moodIconNum = moodIcon[i].value;
            }
          }
          this.$axios
            .get(`${userUrl}/userdata/setssdata`, {
              params: {
                label: this.form.label,
                body: this.form.body,
                hot: this.form.hot,
                moodIconNum: moodIconNum,
                mood: this.form.mood,
                userName: this.userName
              }
            })
            .then(res => {
              if (res.data.ok) {
                this.form.noteBookData = "";
                this.form.label = "";
                this.form.body = "";
                this.form.hot = "";
                this.form.moodIconNum = "";
                this.form.mood = "";
                this.$alert(res.data.data);
                this.getUserInfoData(this.userName);
                this.getSsData(this.userName);
              }
            });
        } else {
          return false;
        }
      });
    },
    ...mapActions("user", ["getSsData", "getUserInfoData"])
  },
  computed: {
    tabelData() {
      let data = this.$store.state.admin.ssData;
      data.forEach(value => {
        if (value.hot) {
          value.hot = 1;
        } else {
          value.hot = 0;
        }
      });
      return data;
    },
    ...mapState("user", ["userName"])
  }
};
</script>

<style lang="sass" scoped> 
@import '@/assets/default.sass'
.gm-ss
  width: 100%
  height: 100%
  .add-list-data    
    width: 90%
    margin: 0 auto
    padding: 5% 0
    h3
      line-height: 60px
    .title
      width: 100%
      height: 40px
      line-height: 40px
    .body
      margin-top: 10px
    .select
      margin-top: 10px
      @include flex(space-between,center)
      .mood
        margin-top: 20px
        @include flex(flex-start,center)
        span
          flex: 0 0 20%
          height: 40px
</style>